<template>
    <div>
        <div id="china-map" style="width: 1000px; height: 565px;border-radius: 10px;"></div>
    </div>
</template>
<script>
import geoJson from "@/assets/data.json";
import {provincialStatistics} from '@/api/release'
export default{
    data(){
        return{
            mapData:[],
        }
    },
    created(){
       this.getData(); 
    },
    methods:{
        getData(){
            provincialStatistics().then(res =>{
                this.mapData = res.data;
                // console.log(this.mapData);
                this.showEcharts();
            });
        },
        showEcharts(){
            this.$nextTick(() => {
                var echarts = require('echarts')
                let myCharts = echarts.init(document.getElementById("china-map"));
                //注册的是 中国地图,只能包括geo组件还在map图表类型的时候才可以使用
                //地图：世界地图，中国，省份，市区地图
                echarts.registerMap("china", geoJson);
                const mapChart = {
                    backgroundColor: "rgb(252,252,252)",
                    // 进行相关配置
                    tooltip: {
                        // 鼠标移到图里面的浮动提示框
                        backgroundColor: 'rgba(0,0,0,0.5)',//提示框背景色
                        borderColor: 'rgba(0,0,0,0)',//边框夜色
                        textStyle: {
                            color: 'rgba(255, 255, 255, 1)'//文字颜色
                        },
                        //自定义提示框自动调用函数
                        formatter: (params)=>{
                        var obj= this.findOption(params.name);
                            let showname = obj.value;
                            return (
                            `
                                <div style='width:100%;height:20px'>
                                    <p style="font-size:12px">处置次数:${showname}</p>
                            </div>
                            `
                            );
                        }
                    },
                    visualMap: {
                        left: 10,
                        bottom: 10,
                        // showLabel: !0,
                        textStyle: {
                            color: '#000'
                        },
                        pieces: [
                        {
                            gte: 0,
                            lt: 50,
                            label: "0≤次数<50",
                            color: "#C5E6FE"
                        },{
                            gt: 50,
                            lt: 100,
                            label: "50≤次数<100",
                            color: "#95D1FE"
                        }, {
                            gte: 100,
                            lt: 150,
                            label: "100≤次数<150",
                            color: "#69BAF7"
                        },{
                            gte: 150,
                            label: "150≤次数",
                            color: "#35A2F5"
                        }],
                        // show: !0
                        },
                    geo: {
                        map:'china',
                        aspectScale: 0.75, //地图的长宽比
                        zoom: 1.1, //图层
                        itemStyle: {
                        normal: {
                            areaColor: {
                                type:'radial',
                                x:0.5,
                                y:0.5,
                                r:0.8,
                                colorStops:[  
                                {
                                    offset:0,
                                    color:'#09132c'
                                },
                                {
                                    offset:1,
                                    color:'#274d68'
                                }
                                ],
                                globalCoord:true
                            },
                            shadowColor:'rgb(172,225,245)', //地图的阴影
                            shadowOffsetX:10,
                            shadowOffsetY:11
                        },
                        },
                        region:[{
                            name:'南海诸岛',
                            itemStyle:{
                                opacity:0
                            }
                        }]
                    },
                    series:[
                        //配置地图相关的数据参数
                        {
                            type:'map',
                            label:{
                                normal:{
                                    show:false, //显示文字
                                    textStyle:{
                                        color:'#1DE9B6',
                
                                    },
                                },
                                emphasis:{
                                    textStyle:{
                                        color:'rgb(98,99,9)' //鼠标移入字体颜色
                                    },
                                }
                            },
                            zoom:1.1,
                            map:'china',
                            itemStyle:{
                                normal:{
                                    // backgroundColor:'rgb(147,235,248)',
                                    // borderWidth:1,
                                    // areaColor:{
                                    //     type:'radial',
                                    //     x:0.5,
                                    //     y:0.5,
                                    //     r:0.8,
                                    //     colorStops:[  //渐变
                                    //         {
                                    //             offset:0,
                                    //             color:'rgb(172,225,245)', //地图整体颜色
                                    //         },
                                    //         {
                                    //             offset:1,
                                    //             color:'rgb(235,244,248)'//地图整体颜色
                                    //         }
                                    //     ],
                                    //     globalCoord:true
                                    // }
                                },
                                emphasis:{    //高亮效果
                                    areaColor:'#FBE7AC',
                                    // borderWidth:0.1
                                }
                            },
                            data: this.mapData
                        }
                    ]
                }

                myCharts.setOption(mapChart)
            });
        },
        findOption(val){
            for (var i = 0; i < this.mapData.length; i++) {
                if (this.mapData[i].name === val) {
                    return this.mapData[i];
                }
            }
        }
    }
}
</script>